<template>
  <el-container direction="vertical" class="_login">
    <el-main class="_main">
      <div class="_login-box">
        <div class="c-mg-b-40p c-font-22p c-text-center">{{ systemStore.config.get('SYSTEM_TITLE') }}</div>
        <el-form ref="formRef" :model="formData" :rules="formRules" size="large" @keyup.enter.native="login">
          <el-form-item prop="loginName">
            <el-input v-model="formData.loginName" placeholder="登录名" prefix-icon="el-icon-user" />
          </el-form-item>
          <el-form-item prop="loginPassword">
            <el-input show-password type="password" v-model="formData.loginPassword" placeholder="登录密码"
              prefix-icon="el-icon-lock" />
          </el-form-item>
          <el-form-item class="_remember">
            <el-switch v-model="formData.isRemember" active-text="记住我"></el-switch>
          </el-form-item>
          <el-button size="large" :loading="loading" type="primary" style="width:100%;" @click="login">登录</el-button>
        </el-form>        
      </div>
    </el-main>
    <layout-footer class="_footer" height="40px" />
  </el-container>
</template>
<script setup>
import { ElMessage } from "element-plus";
import layoutFooter from "@/components/common/layout/footer.vue";
import { useUserStore, useSystemStore } from "@/stores";
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const systemStore = useSystemStore()
const loading = ref(false)
const formRef = ref()
const formData = reactive({
  loginName: "",
  loginPassword: "",
  isRemember: localStorage.getItem("isRemember") == "true" ? true : false,
})
const formRules = reactive({
  loginName: [{ required: true, message: "请输入登录名" }],
  loginPassword: [{ required: true, message: "请输入登录密码" }],
})
async function login() {
  const userStore = useUserStore()
  const isValid = await formRef.value.validate()
  if (!isValid) return false;
  loading.value = true;
  const res = await userStore.login(formData)
  if (res.data.status != 'SUCCESS') {
    ElMessage.error("用户密码错误");
    loading.value = false;
    return
  }
  router.push("/")
}

</script>
<style lang="scss">
._login {
  z-index: 1;
  height: 100%;
  background-color: #23364c;
  overflow: hidden;
  position: relative;
  background-image: url("/bg/bg.png");
  background-position: center top;
  background-size: cover;

  ._main {
    display: flex;
    justify-content: center;
    align-items: center;

    ._login-box {
      z-index: 1000;
      border-radius: 4px;
      width: 380px;
      margin-top: 40px;
      border: 1px solid #ebeef5;
      padding: 40px 25px 35px;
      background-color: #fff;
      box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.1);

      ._remember {
        .el-form-item__content {
          line-height: 1;
        }
      }
    }
  }

  ._footer {
    color: #fff;

    button {
      color: #fff;
    }
  }
}
</style>